<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ZUI，一个简单灵活的前端框架。">
<meta name="author" content="Zentao">
<title>ZUI - 数据表格例子</title>
<link href="../../dist/css/zui.css" rel="stylesheet">
<link href="../../dist/lib/datagrid/zui.datagrid.css" rel="stylesheet">
</head>

<body style="padding: 20px">
  <div id="dataGrid" class="datagrid">
    <header>
      <h1>远程请求数据示例</h1>
    </header>
    <div class="datagrid-container"></div>
    <div class="pager"></div>
  </div>

<script src="../../assets/jquery.js"></script>
<script src="../../dist/js/zui.js"></script>
<script src="../../dist/lib/selectable/zui.selectable.js"></script>
<script src="../../dist/lib/datagrid/zui.datagrid.js"></script>
<script>
$(function() {
    var options3 = {
      height: 'page',
        states: {
            pager: {page: 1, recPerPage: 5},
        },
        dataSource: {
            cache: 2, // 设置缓存为 2
            cols:[
                {name: 'time', label: '时间', width: 132},
                {name: 'hera', label: '英雄', width: 134},
                {name: 'action', label: '动作', width: 109},
                {name: 'target', label: '目标', width: 109},
                {name: 'desc', label: '描述', width: 287}
            ],
            remote: function(params) {
                return {
                    // 原创请求地址
                    url: '../../docs/partial/remote-data-' + params.page + '.json',
                    // 请求类型
                    type: 'GET',
                    // 数据类型
                    dataType: 'json'
                };
            }
        },
    };

    var datagrid = $('#dataGrid').datagrid(options3).data('zui.datagrid');
    console.log('datagrid', datagrid);
});
</script>
</body>
</html>
